<html>
<link rel="stylesheet" href="../static/bootstrap-v4.6.0/css/bootstrap.css">
<link rel="stylesheet" href="../static/bootstrap-select-v1.13.9/css/bootstrap-select.css">
<title>联动下拉示例</title>

<head>
</head>

<body>
    <div style="width:1500px;padding:10px;margin:0px auto;">

        <select class="selectpicker" id="province" data-live-search="true" data-size="10" title="请选择省"> </select>

        <select class="selectpicker" id="city" data-live-search="true" data-size="11" title="请选择市"> </select>

        <select class="selectpicker" id="district" data-live-search="true" data-size="11" title="请选择区"> </select>

        <select class="selectpicker" id="street" data-live-search="true" data-size="11" title="请选择街道"> </select>

        <select class="selectpicker" id="community" data-live-search="true" data-size="11" title="请选择社区"> </select>

        <button id="get" type="button" class="btn btn-primary">获取</button>

    </div>
</body>
<script src="../js/jQuery-v3.6.0.js"></script>
<script src="../static/bootstrap-v4.6.0/js/bootstrap.bundle.js"></script>
<script src="../static/bootstrap-select-v1.13.9/js/bootstrap-select.js"></script>
<script src="../static/bootstrap-select-v1.13.9/js/i18n/defaults-zh_CN.js"></script>


<script>

    //初始化 省
    $.getJSON("../api/province.json", function (res) {
        $.each(res, function (i, n) {
            $("#province").append("<option value=" + n.code + ">" + n.name + "</option>");
        });
        $('#province').selectpicker('refresh');
    });

    //选中事件 调用初始化加载市
    $('#province').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // do something...
        var code = $("#province").selectpicker('val');
        console.log("省：" + code);
        Initcity(code);//调用初始化市

    });

    //初始化 市
    function Initcity(code) {
        $("#city").empty();
        $('#city').selectpicker('refresh');//使用refresh方法更新UI以匹配新状态。
        $("#district").empty();
        $('#district').selectpicker('refresh'); //使用refresh方法更新UI以匹配新状态。
        //加载市
        $.getJSON("../api/city.json", function (res) {
            $.each(res, function (i, n) {
                if (code == i) {
                    $.each(n, function (j, o) {
                        $("#city").append("<option value=" + o.code + ">" + o.name + "</option>");
                    })
                }
            });
            $('#city').selectpicker('refresh');//使用refresh方法更新UI以匹配新状态。
            // $('#city').selectpicker('render'); //render方法强制重新渲染引导程序 - 选择ui。
        });
    }

    //选中事件 调用初始化加载区
    $('#city').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // do something...
        var code = $("#city").selectpicker('val');
        console.log("市：" + code);
        Initdistrict(code);//调用初始化区
    });

    //初始化 区
    function Initdistrict(code) {
        $("#district").empty();
        //加载市
        $.getJSON("../api/area.json", function (res) {
            $.each(res, function (i, n) {
                if (code == i) {
                    $.each(n, function (j, o) {
                        $("#district").append("<option value=" + o.code + ">" + o.name + "</option>");
                    })
                }
            });
            $('#district').selectpicker('refresh'); //使用refresh方法更新UI以匹配新状态。
        });
    }

    //选中事件 调用初始化加载街道
    $('#district').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // do something...
        var code = $("#district").selectpicker('val');
        console.log("区：" + code);
        Initstreet(code);//调用初始化街道
    });

    //初始化 街道
    function Initstreet(code) {
        $("#street").empty();
        //加载街道
        $.getJSON("../api/street.json", function (res) {
            $.each(res, function (i, n) {
                if (code == i) {
                    $.each(n, function (j, o) {
                        $("#street").append("<option value=" + o.code + ">" + o.name + "</option>");
                    })
                }
            });
            $('#street').selectpicker('refresh'); //使用refresh方法更新UI以匹配新状态。
        });
    }

    //选中事件 调用初始化加载社区
    $('#street').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // do something...
        var code = $("#street").selectpicker('val');
        console.log("街道：" + code);
        Initcommunity(code);//调用初始化社区
    });

    //初始化 社区
    function Initcommunity(code) {
        $("#community").empty();
        //加载市
        $.getJSON("../api/community.json", function (res) {
            $.each(res, function (i, n) {
                if (code == i) {
                    $.each(n, function (j, o) {
                        $("#community").append("<option value=" + o.code + ">" + o.name + "</option>");
                    })
                }
            });
            $('#community').selectpicker('refresh'); //使用refresh方法更新UI以匹配新状态。
        });
    }

    //选中事件
    $('#community').on('changed.bs.select', function (e, clickedIndex, isSelected, previousValue) {
        // do something...
        var code = $("#community").selectpicker('val');
        console.log("社区：" + code);
    });

    //获取选中项文本值
    $("#get").click(function () {
        var province = $("#province").find("option:selected")[0].innerText;
        var city = $("#city").find("option:selected")[0].innerText;
        var district = $("#district").find("option:selected")[0].innerText;
        var street = $("#street").find("option:selected")[0].innerText;
        var community = $("#community").find("option:selected")[0].innerText;
        alert(province + "-" + city + "-" + district + "-" + street + "-" + community);
    });

</script>

</html>